<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>basic</title>
    <link th:href="@{/app.css}" rel="stylesheet">
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div class="app"></div>
    <div>
        <h2 th:text="${user.getUsername()}"></h2>
        <p th:text="${user.getAge()}"></p>
        <p th:id="${user.getId()}"></p>
        <p th:utext="${htmlcontent}"></p>
    </div>
    <div th:object="${user}">
        <h2 th:text="*{username}"></h2>
        <p th:text="*{age}"></p>
    </div>
    <h2 th:text="${user.username}"></h2>
    <hr>
    <p th:if="${user.isVip}">会员</p>
    <p th:if="${!user.isVip}">非会员</p>
    <hr>
    <ul>
        <li th:each="tag:${user.tags}" th:text="${tag}"></li>
    </ul>
    <ul>
        <li th:each="tag,stat:${user.tags}"
            th:text="${tag}"
            th:classappend="${stat.even}?'active'"
        >
        </li>
    </ul>
    <hr>
    <div th:switch="${user.sex}">
        <p th:case="1">男</p>
        <p th:case="2">女</p>
        <p th:case="*">默认</p>
    </div>
    <select>
        <option value="1" th:selected="${user.sex == 1}">男</option>
        <option value="2" th:selected="${user.sex == 2}">女</option>
        <option value="0" th:selected="${user.sex == 0}">默认</option>
    </select>

    </div>
    <script th:inline="javascript">
        const user = /*[[${user}]]*/{};
        console.log(user);
        function sayHello() {
            alert("hello!");
        }
    </script>
    <style th:inline="css">
        p {
            text-align: center;
        }
    </style>
<input type="text" th:value="${user.username}">
<button th:onclick="'sayHello()'">点击拜年</button>

<hr>
<form action="subscribe.html" th:action="@{/subscribe}">
    <input type="text" id="name" th:value="${user.username}">
    <input type="text" id="agge" th:value="${user.age}">
    <button type="submit">提交</button>
</form>
</body>
</html>